<script setup lang="ts">

import ComponentHeader from "../components/header.vue"
import ComponentAside from "../components/aside.vue"

import router from '@/router'

import { computed, ref, onMounted } from 'vue'
import { GetUser } from "@/utils/lStorage"
import { formatUserType, formatUserStatus, formatUserStatusTag } from "@/utils/format"



const size = ref('large')
const userInfo = ref({})


onMounted(() => {
  const user = GetUser()
  if (user != null && user.UserId != 0) {
    userInfo.value = user
    return
  }
  router.push({ path: '/login' })
})


</script>

<template>
  <div class="common-layout">
    <el-header class="header" height="80px">
      <ComponentHeader />
    </el-header>

    <el-container>

      <el-aside class="aside">
        <ComponentAside />
      </el-aside>

      <el-container>
        <el-main class="main big">

          <el-descriptions title="用户信息" direction="vertical" :column="4" :size="size" :style="blockMargin">
            <el-descriptions-item label="用户名">{{ userInfo.UserName }}</el-descriptions-item>
            <el-descriptions-item label="邮件地址">{{ userInfo.Email }}</el-descriptions-item>
            <el-descriptions-item label="状态" :span="2">

              <el-tag class="ml-2" :type="formatUserStatusTag(userInfo.Status)">
                {{ formatUserStatus(userInfo.Status) }}

              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="用户类型">
              {{ formatUserType(userInfo.UserType) }}
            </el-descriptions-item>
            <el-descriptions-item label="描述">{{ userInfo.Desc }}
            </el-descriptions-item>
          </el-descriptions>

          <el-divider />

          <el-descriptions title="证书信息" :column="4" :size="size" direction="vertical" :style="blockMargin">
            <el-descriptions-item label="域名">{{ userInfo.Domain }}</el-descriptions-item>
            <el-descriptions-item label="公司/组织">{{ userInfo.Organization }}</el-descriptions-item>
            <el-descriptions-item label="OU" :span="2">{{ userInfo.OrganizationUnit }}</el-descriptions-item>
            <el-descriptions-item label="国家">
              {{ userInfo.Country }}
            </el-descriptions-item>
            <el-descriptions-item label="省份">
              {{ userInfo.Province }}
            </el-descriptions-item>
            <el-descriptions-item label="城市">
              {{ userInfo.Locality }}
            </el-descriptions-item>
            <el-descriptions-item label="邮编">
              {{ userInfo.PostalCode }}
            </el-descriptions-item>
            <el-descriptions-item label="地址">
              {{ userInfo.StreetAddress }}
            </el-descriptions-item>
          </el-descriptions>
        </el-main>


        <el-footer class="foot">Copyright © 2020 新大陆创新发展中心版权.
                <el-link href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">闽B2-20050028</el-link>
              </el-footer>

      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}

.big {
  width: 80%;
}
</style>